<template>
  <div>
    <el-card>
      <div style="margin-bottom: 16px;">
        <el-button type="primary" @click="openDialog()">新增投档线数据</el-button>
      </div>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="ID" width="60"/>
        <el-table-column label="年份">
          <template slot-scope="scope">
            {{ getYearName(scope.row.yearId) }}
          </template>
        </el-table-column>
        <el-table-column label="省份">
          <template slot-scope="scope">
            {{ getProvinceName(scope.row.provinceId) }}
          </template>
        </el-table-column>
        <el-table-column label="批次">
          <template slot-scope="scope">
            {{ getBatchName(scope.row.batchId) }}
          </template>
        </el-table-column>
        <el-table-column label="科类">
          <template slot-scope="scope">
            {{ getSubjectTypeName(scope.row.subjectTypeId) }}
          </template>
        </el-table-column>
        <el-table-column prop="minScore" label="最低分"/>
        <el-table-column prop="maxScore" label="最高分"/>
        <el-table-column prop="avgScore" label="平均分"/>
        <el-table-column prop="controlScore" label="控制线"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size.sync="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog :title="form.id ? '编辑投档线数据' : '新增投档线数据'" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="年份">
          <el-select v-model="form.yearId" placeholder="请选择年份" filterable>
            <el-option v-for="item in yearOptions" :key="item.id" :label="item.yearName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-select v-model="form.provinceId" placeholder="请选择省份" filterable>
            <el-option v-for="item in provinceOptions" :key="item.id" :label="item.province" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="批次">
          <el-select v-model="form.batchId" placeholder="请选择批次" filterable>
            <el-option v-for="item in batchOptions" :key="item.id" :label="item.batchName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="科类">
          <el-select v-model="form.subjectTypeId" placeholder="请选择科类" filterable>
            <el-option v-for="item in subjectTypeOptions" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="最低分"><el-input v-model="form.minScore" /></el-form-item>
        <el-form-item label="最高分"><el-input v-model="form.maxScore" /></el-form-item>
        <el-form-item label="平均分"><el-input v-model="form.avgScore" /></el-form-item>
        <el-form-item label="控制线"><el-input v-model="form.controlScore" /></el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ScoreDataManagement',
  data() {
    return {
      tableData: [],
      total: 0,
      queryParams: {
        page: 1,
        size: 10
      },
      dialogVisible: false,
      form: {
        id: null,
        yearId: null,
        provinceId: null,
        batchId: null,
        subjectTypeId: null,
        minScore: '',
        maxScore: '',
        avgScore: '',
        controlScore: null
      },
      yearOptions: [],
      provinceOptions: [],
      batchOptions: [],
      subjectTypeOptions: []
    }
  },
  created() {
    this.fetchData();
    this.fetchYearOptions();
    this.fetchProvinceOptions();
    this.fetchBatchOptions();
    this.fetchSubjectTypeOptions();
  },
  methods: {
    fetchData() {
      axios.get('/api/admin/score-data/list', {
        params: { page: this.queryParams.page, size: this.queryParams.size }
      }).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    fetchYearOptions() {
      axios.get('/api/admin/year/list', { params: { page: 1, size: 100 } }).then(res => {
        this.yearOptions = res.data.data.records;
      });
    },
    fetchProvinceOptions() {
      axios.get('/api/admin/province/list', { params: { page: 1, size: 100 } }).then(res => {
        this.provinceOptions = res.data.data.records;
      });
    },
    fetchBatchOptions() {
      axios.get('/api/admin/batch/list', { params: { page: 1, size: 100 } }).then(res => {
        this.batchOptions = res.data.data.records;
      });
    },
    fetchSubjectTypeOptions() {
      axios.get('/api/admin/subject-type/list', { params: { page: 1, size: 100 } }).then(res => {
        this.subjectTypeOptions = res.data.data.records;
      });
    },
    openDialog(row) {
      if (row) {
        this.form = { ...row }
      } else {
        this.form = {
          id: null,
          yearId: null,
          provinceId: null,
          batchId: null,
          subjectTypeId: null,
          minScore: '',
          maxScore: '',
          avgScore: '',
          controlScore: null
        }
      }
      this.dialogVisible = true
    },
    handleSubmit() {
      if (
        !this.form.yearId || isNaN(this.form.yearId) ||
        !this.form.provinceId || isNaN(this.form.provinceId) ||
        !this.form.batchId || isNaN(this.form.batchId) ||
        !this.form.subjectTypeId || isNaN(this.form.subjectTypeId)
      ) {
        this.$message.error('所有ID字段都不能为空且必须为数字');
        return;
      }
      if (this.form.controlScore !== null && isNaN(this.form.controlScore)) {
        this.$message.error('控制线必须为数字');
        return;
      }
      if (this.form.id) {
        axios.put('/api/admin/score-data', this.form).then(() => {
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.fetchData()
        })
      } else {
        axios.post('/api/admin/score-data', this.form).then(() => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.fetchData()
        })
      }
    },
    handleDelete(id) {
      this.$confirm('确定删除吗？').then(() => {
        axios.delete(`/api/admin/score-data/${id}`).then(() => {
          this.$message.success('删除成功')
          this.fetchData()
        })
      })
    },
    getYearName(id) {
      const item = this.yearOptions.find(opt => opt.id === id)
      return item ? (item.yearName || item.year_name) : id
    },
    getProvinceName(id) {
      const item = this.provinceOptions.find(opt => opt.id === id)
      return item ? (item.province) : id
    },
    getBatchName(id) {
      const item = this.batchOptions.find(opt => opt.id === id)
      return item ? (item.batchName || item.batch_name) : id
    },
    getSubjectTypeName(id) {
      const item = this.subjectTypeOptions.find(opt => opt.id === id)
      return item ? (item.typeName || item.type_name) : id
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.queryParams.size = size;
      this.queryParams.page = 1;
      this.fetchData();
    },
  }
}
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 